var arr = [
    {x:-64, s:.83, z:1},
    {x:140, s:1,  z:2},
    {x:338, s:.83, z:1},
    {x:960, s:.83, z:1},
    {x:960, s:.83, z:1},
    {x:960, s:.83, z:1}
]
function render(){
    // 1 获取所有轮播图
    let swiperObjs = document.querySelectorAll('.swiper .swiper-slide')
    // 2 遍历加行内样式
    swiperObjs.forEach((item,i)=>{
    item.style.transform = `translateX(${arr[i].x}px) scale(${arr[i].s})`
    item.style.zIndex = arr[i].z
    })
}
render() 

function next(){
    // 1 从数组最后弹出一个值
    let temp = arr.pop()
    // 2 将弹出的值压入到数组第一个值
    arr.unshift(temp)
    // 3 重新渲染遍历
    render()
}
document.querySelector('.swiper .swiper-next').onclick = next
function prev(){
    // 1 从数组前面弹出一个值
    let temp = arr.shift()
    // 2 将弹出的值push到数组后面
    arr.push(temp)
    // 3重新渲染
    render()
}
document.querySelector('.swiper .swiper-prev').onclick = prev

// 点击图片切换
document.querySelector('.swiper .swiper-wrapper').onclick = function(evt){
    let e = evt || window.event
    let target = e.target || e.srcElement
    if(target.parentNode.style.transform.includes('64px')){
        prev()
    }
    if(target.parentNode.style.transform.includes('338px')){
        next()
    }
}